<!DOCTYPE html>
<html style="font-size: 46.875px;">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta content="yes" name="apple-touch-fullscreen">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1,user-scalable=no" name="viewport">
        <link rel="stylesheet" href="/static/css/Chat3.css">
        <title>聊天消息-音速风暴</title>
        <script type="text/javascript">
            !function(e,i){"use strict";var t=function(){var i=e.navigator.userAgent,t=i.length,n=i.replace(/iphone|ipad|ipod|android|Series60|BlackBerry|Windows Phone|Mobile/gi,"").length;return n!=t}(),n=i.querySelector('meta[name="viewport"]'),a=1,r=1,o=e.navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);a=o?Math.min(e.devicePixelRatio,3):1,a=e.top===e.self?a:1,r=1/a,n.setAttribute("content","width=device-width,initial-scale="+r+",maximum-scale="+r+", minimum-scale="+r+",user-scalable=no"),e.topscale=r;var c=function(){var n=i.documentElement,a=n.clientWidth;!t&&a>750&&(a=750,e.ispcview=!0);var r=20*a/320;n.style.fontSize=r+"px",e.htmlsize=r};c();var l="orientationchange"in e?"orientationchange":"resize";e.addEventListener(l,c,!1)}(window,document)
        </script>
    </head>
    <body>
        <div class="main">
            <div class="chat_app" >
                <div class="chat_area" >
                    <div class="chat_header" >
                        <div >
                            <a class="hd_back" href="kfchatuser">返回</a> 
                            <span class="common_hd_logo" >&nbsp;</span> 
                            <span class="unread_count" >
                                <em class="unread_count_em" >0</em>
                                <span class="countimg"></span>
                            </span>

                            <h1 class="hd_tle" >音速风暴客服留言</h1>
                        </div>
                    </div>

                    <div class="chat_main" >
                        <div class="message_content" > 
                            <div class="loader" style="height:auto;" data-reactid=".2.0.1.0.0">
                                <div class="com_loader"></div>
                                <a class="loadmore" href="javascript:;" style="display:none;text-decoration:none;color:#74abd6" end_time="0">加载更多...</a>
                            </div>
                            <div class="message_content1">
                        </div>
                    </div>
                    <div class="infoEditArea">
                        <div>
                            <div class="tool_bar">
                                <div class=" tool_item">
                                    <span class="faceitem"><em></em><i></i></span>
                                </div>
                                <div class="inputtextDiv" style="margin-left:1.322rem;">
                                    <div class="composer">
                                        <form id="send_form">
                                        <div class="edit_area">
                                            <input type="text" class="inputValue" placeholder="请输入您的消息"
                                            />
                                        </div>
                                        <div class="action">
                                            <div class="send_btn" type="submit">发送</div>
                                        </div>
                                        </form>
                                    </div>
                                </div>
                            </div>                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="display:none" id="backup">
            <div class="message_item receive" >
                <div class="apart_time" >
                    <span >上午 8:20</span>
                </div>                        
                <div class="imc_li_receive" >
                    <div class="content" >
                        <div class="buble_arrow" ></div>

                        <div class="message_content_wrapper" >
                            <div class="emojiDiv" >
                                接收文本测试.
                            </div>
                        </div>
                    </div>

                    <div class="user_info" >
                        <div class="avatar" ><img class="img" src="/static/images/getheadimg.png" alt="" ></div>
                        <h3 class="nickname" ><span class="nickname_text" >顾客</span></h3>
                    </div>
                </div>
            </div>        
            <div class="message_item send" >
                <div class="apart_time" >
                    <span >上午 8:20</span>
                </div>
                <div class="imc_li_send" >
                    <div class="content margin_top">
                        <div class="buble_arrow" ></div>

                        <div class="message_content_wrapper" >
                            <div >
                                文本測試.
                            </div>
                        </div>
                    </div>
                    <div class="user_info" >
                        <div class="avatar" ><img class="img" src="/static/images/Chat/person.jpg" alt="" ></div>
                        <h3 class="nickname" ><span class="nickname_text" >微信公众号</span></h3>
                    </div>
                </div>
            </div> 
            
        </div>
    </body>
    <script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        //$('input').focus()
        var send_m_backup = $('#backup .message_item.send'), receive_m_backup = $('#backup .message_item.receive');
        var message_content = $('.message_content1');
        var uid = location.href.match(/uid=([^&]+)/);
        var kfsdict = {{ kfsdict|safe }}
        
        uid = uid?uid[1]:"";
        $('.send_btn').click(function(){
            $(this).parents('form').submit()
        }).css('cursor','pointer');
        $('form#send_form').submit(function(e){
            e.preventDefault();
            var self = $(this);
            var openid = self.attr('to_openid');
            if(!openid){alert('数据未加载完成');return;}
            var input = self.find('input');
            var message = input.val();
            if(!message){alert('不能发送空内容');return;}
            input.val('');
            $.post('?action=sendmessage&openid='+openid, {'message': message}, function(data){
                console.info(data);
                ret = JSON.parse(data);
                add_send_message(ret);
                message_content.parent().scrollTop(message_content[0].scrollHeight);                
            });
        })
        add_message = function(data, addtype, isprepend){
            if(addtype=='send'){
                var message_item = send_m_backup.clone();            
            }else{
                var message_item = receive_m_backup.clone();
            }
            if(data['error']){
                if(data['error']=='limit_timeout'){
                    message_item.find('.apart_time span').text("发送失败，超出48小时限制");
                }else if(data['error']=='unsubscribe'){
                    message_item.find('.apart_time span').text("发送失败，该用户已取消关注");
                }else if(data['error']=='NoLinkAccount'){
                    message_item.find('.apart_time span').text("权限限制，未绑定客服帐号");
                }
                message_item.find('.imc_li_send').remove()
                message_content.append(message_item);
                return;
            }
            var strtime = data['strtime']
            if(data.kfsystem){
                strtime += '[客服系统]'
                if(data.iskf){
                    console.info(data, kfsdict)
                    if(kfsdict[data.nickname]){
                        data.headimgurl = kfsdict[data.nickname].kf_headimgurl_cache
                        data.nickname = kfsdict[data.nickname].kf_nick
                    }
                }
            }
            message_item.find('.apart_time span').text(strtime);
            if(data.imgid){
                if(data.imgid=='expire'){
                    message_item.find('.message_content_wrapper div').text('[图片无法显示-超过3天]');
                }else{
                    message_item.find('.message_content_wrapper div').html(
                        '<img src="https://api.weixin.qq.com/cgi-bin/media/get?access_token={{ we_ac }}&media_id='+data.imgid+'">'
                    );
                }
            }else if(data.voiceid){
                if(data.voiceid=='expire'){
                    message_item.find('.message_content_wrapper div').text('[语音无法获取-超过3天]');
                }else{
                    message_item.find('.message_content_wrapper div').html(
                        '<a href="javascript:;" voiceid="'+data.voiceid+'" style="text-decoration:none;color:#74abd6">语音信息[点击获取]</a>'
                    );  
                }              
            }else{
                message_item.find('.message_content_wrapper div').text(data['content']);
            }
            if(data.headimgurl){
                message_item.find('.avatar img').attr('src', data.headimgurl);
            }
            if(data.nickname){
                message_item.find('.nickname_text').text(data.nickname);
            }
            isprepend?message_content.prepend(message_item):message_content.append(message_item);
        }
        add_send_message = function(data, isprepend){
            add_message(data, 'send', isprepend);
        };
        add_receive_message = function(data, isprepend){
            add_message(data, 'receive', isprepend);
        };
        var loader = $('.com_loader');
        var loadmore = $('.loadmore');
        loadmore.click(function(){
            var self = $(this);
            var end_time = self.attr('end_time');
            self.hide();
            loader.show();
            loadmessages(end_time);
        })
        loadmessages = function(end_time, ifscroll){
            var posturl = '?action=loadmessages&uid='+uid
            if(end_time){
                posturl += '&end_time=' + end_time;
            }
            $.post(posturl, function(data){
                console.info(data);
                // temp = data;
                loader.hide();
                if(data['start_time']){
                    loadmore.attr('end_time', data['start_time']).show();
                }if(data['openid']){
                    $('form#send_form').attr('to_openid', data['openid'])
                }
                appendMessages(data['messages'])
                if(ifscroll){
                    message_content.parent().scrollTop(message_content[0].scrollHeight); 
                    console.info('Done!', message_content[0].scrollHeight)
                    $('.emojiDiv img').load(function(){
                        // console.info(this, 'ImageDone!', message_content[0].scrollHeight)
                        message_content.parent().scrollTop(message_content[0].scrollHeight); 
                    })
                }
            }, 'json')
        }
        appendMessages = function(messages){
            for(i in messages){
                if(messages[i]['iskf']){
                    add_send_message(messages[i], true)
                }else{
                    add_receive_message(messages[i], true)
                }
            }            
        }
        loadmessages(null, true)
        $(document).on('click', 'a[voiceid]', function(){
            var self = $(this);
            var voiceid = self.attr('voiceid');
            self.text('语音信息[获取中]').removeAttr('voiceid');
            $.post('?action=getvoice&voiceid='+voiceid, function(data){
                self.attr('voiceid', voiceid)
                if(data=='success'){
                    self.text('语音信息[获取成功]')
                }else if(data=='timeout_or_unsubscribe'){
                    self.text('语言信息[获取失败,超48小时失效或无关注公众号]')                   
                }else{
                    self.text('语言信息[获取失败,其它错误]')
                }
            })
        })
    </script>
</html>
